<template>
    <div>
        <div class="mg-content">
            <el-row :gutter="20">
                <el-col :span="6">
                     <el-input v-model="input" size="mini" @keyup.enter.native="keyDown($event)" placeholder="请输入原料名称" :maxlength="20"></el-input>
                </el-col>
                <el-col :span="10">
                    <div  class="text-left">
                        <el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>
                        <el-button type="primary" size="mini"  icon="el-icon-plus" @click="addShow=true;activityId=''">绑定</el-button>
                        <el-button type="primary" size="mini"  icon="el-icon-plus" @click="addShow=true;activityId=''">新建</el-button>
                    </div>
                </el-col>
            </el-row>
            <br>
            <div class="treeList" :span="4" style="margin-bottom:20px" >
                <el-card class="box-card" v-for="(item,index) in tableData">
                    <div slot="header" class="clearfix">
                        <el-row>
                            <el-col class="text-left" :span="9">
                                <span>{{item.name}}</span>
                            </el-col>
                            <el-col :span="15" class="text-right">
                                <el-button style="padding: 3px 1px;" type="text" icon="el-icon-edit" ></el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="card-list">
                        <el-row :gutter="20">
                            <el-col :span="10">
                                <img :src="item.img" style="width:100%;height:100px">
                            </el-col>
                            <el-col :span="14">
                                <br>
                                <div class="text-left"><i class="icon "></i>{{item.account}}</div>
                                <br>
                                <div class="text-left">{{item.phone}}</div>
                            </el-col>
                        </el-row>
                        <div class="text-left">{{item.address}}</div>
                    </div>
                </el-card>
            </div>
            <br>
            <div class="block text-right">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        <model :isShow="addShow" :id="activityId" @close="addClose" @addSuccess="addSuccess"></model>
        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>
import model from './model.vue'
import PluginConfirm from '@/components/PluginConfirm.vue'
export default{
    data(){
        return{
            loading:false,
            treeData:[],
            defaultProps: {
                children: 'children',
                label:function(data){
                        return "["+data.no+"]"+data.name;
                    }
            },
            tableData: [],
            pageSizes:window.pageSizes,//所有可选择的条数
            pageSize:window.pageSize,//控制一页显示的条数
            total:10,//总条数
            input:"",
            currentPage:1,
            inputValue:"",
            dialogIsShow:false,
            addShow:false,
            activityId:"",
        }
    },
    components: {
        model,
        PluginConfirm
    },
    created(){
        window.this=this;
        this.initData()
    },
    methods:{
        handleNodeClick(data) {
                var id=data.id;
                var cate="";
                if(id!=0){
                    cate=id;
                }else{
                    cate="";
                }
                this.loading=true;
                this.$axios.get("materials?search.category.id_eq=" + cate +"&page.pn=1&page.size=" + this.pageSize).then((data)=>{
                    if(data.status==200){
                    this.tableData=data.content.material.rows;
                        for(var i=0;i<this.tableData.length;i++){
                            if(this.tableData[i].category.name!=null){
                                this.tableData[i].category=this.tableData[i].category.name
                            }
                        }
                    this.total=data.content.material.total;
                    this.loading=false
                }else{
                    this.loading=false
                }
            })
        },
        initData(){
            this.currentPage=1;
            this.getData();
        },
        keyDown(ev){
            if(ev.keyCode==13) {
                this.currentPage=1;
                this.inputValue=this.input;
                this.getData();
            }
        },
        search(){
            this.currentPage=1;
            this.inputValue=this.input;
            this.getData();
        },
        handleCurrentChange(currentPage){
            this.currentPage=currentPage;
            this.getData();
        },
        handleSizeChange(number){
            this.pageSize=number;
            this.getData();
        },
        getData(){
            this.tableData=[{
                name:"1号店",
                img:"http://p5.so.qhimgs1.com/bdr/_240_/t013b15ed86d3d3359b.jpg",
                address:"纬二街",
                phone:"17791356485",
                account:"李洋",
            },{
                name:"2号店",
                img:"http://p2.so.qhmsg.com/bdr/_240_/t01b03771e5d4869507.jpg",
                address:"凤城12路",
                phone:"15028456955",
                account:"房少辉",
            },{
                name:"3号店",
                img:"http://p2.so.qhimgs1.com/bdr/_240_/t01f77025a2d9d0d72e.jpg",
                address:"红庙坡",
                phone:"15029396544",
                account:"张三",
            }]
            // this.loading=true;
            // this.$axios.get("materials?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&search.name_like="+this.inputValue).then((data)=>{
            //     this.loading=false
            //     this.treeData=data.content.treeData
            //     this.tableData=data.content.material.rows
            //     this.total=data.content.material.total
            // }).catch(function(err){
            //     console.log(err);
            // })
        },
        /*用户选择提示框后处理*/
        dialogResult(param){
            this.dialogIsShow=param.close;
            if(param.choose==="ok"){
                //console.log("确定");
                this.$http.delete("materials/"+this.curDataRow.id).then(function(data){
                    if(data.status==200){
                        this.tableData.splice(this.curDataIndex,1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.initData();
                    }else{
                        this.$message({
                            type: 'error',
                            message: data.message
                        });
                    }
                })
            }else if(param.choose==="cancel"){
                //console.log("取消");
            }else{
                //console.log("不做处理");
            }
        },
        handleDelete(index, row) {
            this.curDataIndex = index;
            this.curDataRow = row;
            this.dialogIsShow = true;
            return false;

            console.log(index, row);
            this.$confirm('您确定删除此数据?', '提示', {
                confirmButtonText: '取消',
                cancelButtonText: '确定',
                type: 'warning',
                cancelButtonClass:"deleteCancel",
                confirmButtonClass:"deleteConfirm",
                showClose:false
            }).then(() => {

            }).catch(() => {
                this.$http.delete("materials/"+row.id).then(function(data){
                    if(data.status==200){
                        this.tableData.splice(index,1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.initData();
                    }else{
                        this.$message({
                            type: 'error',
                            message: data.message
                        });
                    }
                })
            });

        },
        addSuccess(item){
            this.addShow=false;
            this.initData();
        },
        addClose(){
            this.addShow=false;
        },
    }
}
</script>
<style scoped>
.me_title{
    padding:10px 0px;background-color: #eef1f6; border: 1px solid #dfe6ec;border-bottom: 0px;
}
 .card-list{
      height: 200px;
      background-color: #efefef;
      overflow-y: auto;
      padding: 10px 13px;
      background-color: #FFF;
      margin-bottom: 1px;
  }
 .treeList .box-card {
     float: left;
     width: 320px;
     margin-right: 10px;
     margin-bottom: 10px;
  }
  .treeList{
      height: 500px;
      background-color: #FFF;
  }
</style>
